
import React from 'react';
import ThemeItem from './Item';
import {WeaLocaleProvider, WeaSelect} from 'ecCom';
import {Col, Row} from "antd";
import ColorPicker from 'rc-color-picker';
import {defaultCfg} from "../../../../../../constants/theme";

const getLabel = WeaLocaleProvider.getLabel;

const repeatType = {
  Y: '1',
  N: '0'
};

const selectOpts = () => {
  return [
    {key: '0', showname: getLabel('511782','背景图片')},
    {key: '1', showname: getLabel('511783','底色')}
  ]
};

const repeatTypeOpts = () => {
  return [
    {key: repeatType.Y, selected: false, showname: getLabel('511784','重复')},
    {key: repeatType.N, selected: false, showname: getLabel('511785','不重复')}
  ]
};

export default class ThemeBackgroundSetting extends React.Component {
  onFileInputClick(){
    if(this.fileInput){
      this.fileInput.click()
    }
  };

  render() {
    const {onChange, data, onUploadImg} = this.props;

    return (
      <div>
        <h4>{getLabel('511786','页面背景')}</h4>
        <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@ppxnv2`} label={getLabel('511799','背景设置')}>
          <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@61ggh5`}
            value={data.type}
            options={selectOpts()}
            onChange={onChange('background.type')}
          />
        </ThemeItem>
        {
          data.type == 1 ?
            <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@ealazi`} label={getLabel('511800','颜色')}>
              <ColorPicker ecId={`${this && this.props && this.props.ecId || ''}_ColorPicker@ppzqua`}
                color={data.css.backgroundColor || defaultCfg.background.backgroundColor}
                onChange={onChange('background.css.backgroundColor')}
              />
            </ThemeItem>
            :
            <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@7xfitr`} label={getLabel('511782','背景图片')}>

            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@e385fn`} style={{ padding: 0 }}>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@nuqpca`} span={5}>
                  <img className="edc-row-img" onClick={this.onFileInputClick.bind(this)} src={data.css.backgroundImage && data.css.backgroundImage.match(/\(([^)]*)\)/)[1] || defaultCfg.emptyImg}></img>
                  <input type="file" style={{display: 'none'}} ref={(input)=>{this.fileInput = input}} key="background.css.backgroundImage" onChange={onUploadImg.bind(this)} accept=".jpg,.gif,.png,.jpeg"></input>
              </Col>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bmxb49`} span={8} offset={1}>
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@2tyjbv`}
                  value={data.repeat || '0'}
                  options={repeatTypeOpts()}
                  onChange={onChange('background.repeat')}
                />
              </Col>
            </Row>
            </ThemeItem>
        }
      </div>
    )
  }
}